<template>
    <div class="content">
        <div class="title">
            <van-icon @click="router.back()" class="icon" size="22px" color="#fff" name="arrow-left" />
        </div>
        <div class="img">
            <img src="@/assets/home/bnb.png" alt="">
            <div class="right">
                <div style="color: #fff;">BTB</div>
                <div style="color: #ccc;">BTB coin</div>
            </div>
        </div>
        <div class="items">
            <div class="item">
                <div>{{ $t('可用') }}</div>
                <div style="font-size: 17px;color: #fff;">0</div>
                <div>$0</div>
            </div>
            <div class="item">
                <div>{{ $t('凍結') }}</div>
                <div style="font-size: 17px;color: #fff;">0</div>
                <div>$0</div>
            </div>
        </div>
        <div class="btns">
            <div @click="goto('/transfer')" class="btn">{{ $t('轉移') }}</div>
            <div @click="goto('/transferout')" class="btn">{{ $t('轉帳') }}</div>
        </div>
        <div style="color: #fff;font-size: 15px; margin-top: 20px;">{{ $t('交易') }}</div>
        <div @click="goto('/page/trade/exchange')" class="li">
            <div class="le">BTB/USDT 0.00%</div>
            <div class="ri">
                <div class="top">0</div>
                <div class="btm">≈$0</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

function goto(url) {
    router.push(url)
}
</script>

<style lang="scss" scoped>
.content {
    width: 100vw;
    height: 100vh;
    background-color: #17171a;
    padding: 0 15px;
    box-sizing: border-box;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 54px;
        padding: 15px 0;
        box-sizing: border-box;

    }

    .img {
        display: flex;
        align-items: center;
        margin-top: 14px;

        img {
            width: 32px;
            height: 32px;
        }

        .right {
            padding: 0 4px;
            font-size: 15px;
        }
    }

    .items {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #d5d5d5;
        margin-top: 18px;

        .item {
            width: 50%;
        }
    }

    .btns {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;

        .btn {
            width: 48%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            border-radius: 4px;
            background-color: #2e323b;
            color: #fff;
            font-size: 16px;
        }
    }

    .li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        color: #fff;
        margin-top: 20px;

        .btm {
            font-size: 13px;
            color: #d5d5d5;
        }
    }
}
</style>